<script setup>
// 关于页面组件
</script>

<template>
  <div class="about">
    <div class="about__container">
      <h1 class="about__title">关于书法项目</h1>
      <p class="about__description">
        这是一个专注于书法学习和交流的平台，致力于传承和发扬中华书法艺术。
      </p>
    </div>
  </div>
</template>

<style scoped>
.about {
  padding: 2rem;
  min-height: calc(100vh - 200px);
}

.about__container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.about__title {
  font-size: 2.2rem;
  color: var(--color-heading);
  margin-bottom: 1.5rem;
}

.about__description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text);
}

@media (min-width: 1024px) {
  .about {
    display: flex;
    align-items: center;
    min-height: 100vh;
  }
}
</style>
